<template>
  <div class="top-wrapper" v-if="show" @click="go">
    <div class="button">
      <i class="cubeic-pullup arrow"></i>
    </div>
  </div>
</template>

<script>
import scroll from '@/util/scroll'
export default {
  name: 'TopComponent',
  data() {
    return {
      show: false
    }
  },
  methods: {
    go() {
      scroll.toTop()
    },
    // listen scroll
    handleScroll() {
      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
      if (scrollTop > 220) {
        this.show = true
      } else {
        this.show = false
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll, true)
  }
}
</script>

<style scoped lang="stylus">

$bg-color-off = rgba(0, 0, 0, .3)

.top-wrapper
  position fixed
  bottom 55px
  right 20px
  z-index 100
  .button
    width 40px
    height 40px
    line-height 40px
    position relative
    background $bg-color-off
    border-radius 50%
    .arrow
      font-weight 700
      font-size 35px
      color white
</style>
